<template>
  <div class="base-container" id="main">
    <t-form
      ref="form"
      :data="queryParams"
      label-width="80"
      @submit="
        () => {
          this.pagination.current = 1;
          this.queryParams.pageNum = 1;
          this.getList();
        }
      "
      @reset="
        () => {
          this.queryParams.pageNum = 1;
          this.queryParams.pageNum = 1;
          this.getList();
        }
      "
    >
      <t-row style="border-bottom: 1px solid #e5e6eb; margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="项目名称" name="projectName">
            <t-input v-model="queryParams.projectName" clearable placeholder="请输入项目名称" style="width: 240px" />
          </t-form-item>
          <!--          <t-form-item label="项目状态" name="localStandardStatus">-->
          <!--            <t-select style="width: 240px" clearable  v-model="queryParams.projectStatus"-->
          <!--                      :options="dict.type.project_status">-->
          <!--            </t-select>-->
          <!--          </t-form-item>-->
          <!--          <t-form-item label="申报单位" name="draftUnitNames">-->
          <!--            <t-input-->
          <!--              v-model="queryParams.draftUnitNames"-->
          <!--              clearable-->
          <!--              placeholder="请输入申报单位"-->
          <!--              style="width: 240px"-->
          <!--            />-->
          <!--          </t-form-item>-->
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit"> 查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <t-table
      rowKey="index"
      size="small"
      :data="data"
      :columns="columns"
      hover
      :pagination="pagination"
      :loading="dataLoading"
      :sort="sort"
      :hideSortTips="true"
      @sort-change="sortChange"
    >
      <template #projectName="{ row }">
        <t-link
          @click="
            dialog.objId = row.id;
            dialog.header = row.projectName;
            dialog.open_project_detail = true;
          "
          hover="color"
          theme="primary"
          >{{ row.projectName }}</t-link
        >
      </template>
      <template #adviceFunding="{ row }"> {{ row.adviceFunding }}万元 </template>
      <template #projectStatus="{ row }">
        <t-tag
          @click="
            dialog.header = row.projectName;
            dialog.objId = row.id;
            dialog.open_approve_list = true;
          "
          class="cursor-pointer"
          :theme="handleTheme(row.projectStatus, dict.type.sf_project_status)"
          variant="light"
        >
          {{ row.projectStatus | filterByDict(dict.type.sf_project_status) }}
        </t-tag>
      </template>
      <template #reviewTeamInfo="{ row }">
        <t-button
          size="small"
          variant="text"
          class="t-button-link"
          @click="
            dialog.createUserId = row.createUserId;
            dialog.header = row.projectName;
            dialog.objId = row.id;
            dialog.open_expert_account_detail = true;
          "
        >
          <t-icon name="browse" slot="icon" />
          查看
        </t-button>
      </template>
      <template #op="{ row }">
        <t-button
          size="small"
          @click="
            dialog.objId = row.id;
            dialog.header = row.projectName;
            dialog.open_project_detail = true;
          "
          variant="text"
          class="t-button-link"
        >
          <t-icon name="info-circle" slot="icon" />
          详情
        </t-button>
      </template>
    </t-table>
    <project-detail-dialog
      tabDefaultValue="1"
      :header="dialog.header"
      :objId="dialog.objId"
      :visible.sync="dialog.open_project_detail"
      v-if="dialog.open_project_detail"
    ></project-detail-dialog>
    <approve-list
      :header="dialog.header"
      :objId="dialog.objId"
      :visible.sync="dialog.open_approve_list"
      v-if="dialog.open_approve_list"
    ></approve-list>
    <expert-account-detail-dialog
      :header="dialog.header"
      moduleName="kjsf"
      :createUserId="dialog.createUserId"
      :objId="dialog.objId"
      :visible.sync="dialog.open_expert_account_detail"
      v-if="dialog.open_expert_account_detail"
    ></expert-account-detail-dialog>
  </div>
</template>

<script>
import projectDetailDialog from '@/pages/kjsf/project/components/project-detail-dialog.vue';
import ApproveList from '@/pages/kjsf/approve/components/approve-list.vue';
import ExpertAccountDetailDialog from '@/pages/kjxm/apply/components/expert-account-detail-dialog.vue';

export default {
  name: 'standard-list',
  dicts: ['sf_project_status'],
  components: {
    projectDetailDialog,
    ApproveList,
    ExpertAccountDetailDialog,
  },
  data() {
    return {
      dialog: {
        open: false,
        header: '',
        row: {},
        data: {},
        open_project_detail: false,
        open_outline_detail: false,
        open_contract_detail: false,
        objId: 0,
        open_approve_list: false,
        open_expert_account_detail: false,
        createUserId: '',
      },
      nowRow: {},
      deleteVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: '',
        projectNum: '',
        localStandardStatus: '',
        formulateType: '',
        publicDateRange: [],
        standardProperty: '',
        standardCategory: '',
        draftUnitNames: '',
        draftPersonNames: '',
        startPublishDate: '',
        endPublishDate: '',
      },
      deptMenuOptions: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination, pageInfo);
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList();
        },
      },
      sort: [],
      dataLoading: false,
      opinionVisible: true,
      data: [],
    };
  },
  computed: {
    columns() {
      const columns = [
        {
          colKey: 'projectName',
          title: '项目名称',
          align: 'center',
          width: 220,
        },
        {
          colKey: 'declareDate',
          title: '申报日期',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'startDate',
          title: '项目开始日期',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'endDate',
          title: '项目结束日期',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'manageDeptName',
          title: '主管单位名称',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'adviceFunding',
          title: '拟投入经费',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'keyWord',
          title: '关键词',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'declareDeptName',
          title: '申报单位',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'projectStatus',
          title: '项目状态',
          align: 'center',
          width: 160,
        },
        {
          colKey: 'op',
          title: '操作',
          align: 'center',
          width: 120,
          fixed: 'right',
        },
      ];
      // const obj = {
      //   colKey: 'reviewTeamInfo',
      //   title: '评审组信息',
      //   align: 'center',
      //   width: 90,
      //   fixed: 'right',
      // };
      // columns.splice(columns.length - 1, 0, obj);
      // if (this.$store.state.user.roles.includes('admin') || this.$store.state.user.roles.includes('dwgly') || this.$store.state.user.roles.includes('kjcspy')) {

      // }
      return columns;
    },
  },
  async created() {
    Object.assign(this.queryParams, this.handelQuery(this.queryParams, this.$route.query));
    await this.getDeptTreeSelect();
    this.getList();
    // if (!this.$store.state.user.roles.includes('admin') && !this.$store.state.user.roles.includes('kjcspy')) {
    //   this.$api.kjsf.project
    //     .getZJZZPZ()
    //     .then((res) => {})
    //     .catch((e) => {
    //       this.$message.error({
    //         content: e.toString(),
    //         placement: 'center',
    //         closeBtn: true,
    //         duration: 0,
    //         style: { backgroundColor: '#fef0f0', color: 'black' },
    //       });
    //     });
    // }
  },
  methods: {
    getDeptTreeSelect() {
      return this.$api.system.dept
        .treeSelectAllIn()
        .then((response) => {
          this.deptMenuOptions = response.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    sortChange(sort) {
      this.sort = sort;
      let orderByColumn = [];
      let isAsc = [];
      if (sort instanceof Array) {
        orderByColumn = sort.map((val) => val.sortBy);
        isAsc = sort.map((val) => (val.descending ? `desc` : `asc`));
      } else {
        orderByColumn = [sort.sortBy];
        isAsc = [sort.descending ? `desc` : `asc`];
      }
      this.queryParams.orderByColumn = orderByColumn.join(',');
      this.queryParams.isAsc = isAsc.join(',');
      this.getList();
    },
    getList() {
      // [this.queryParams.startPublishDate,this.queryParams.endPublishDate] = this.queryParams.publicDateRange;
      this.dataLoading = true;
      this.queryParams.pageNum = this.pagination.current || 1;
      this.$api.kjsf.project
        .myList(this.queryParams)
        .then((response) => {
          this.pagination.total = response.total;
          this.data = response.rows;
          this.dataLoading = false;
        })
        .catch((e) => {
          this.dataLoading = false;
          this.$message.error(e.toString());
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

